<template>
  <view class="router-view bcl-active">
    <view>
      <view class="bcl-white text-center p-30 border border-bottom">
        <view class="text-tips mb-15 fz-15">
          当前账户保证金：<text class="cl-main">￥{{ balance || 0 }}</text>
        </view>

        <view class="text-tips mb-15 fz-15">
          已选保证金：<text class="cl-main"
            >￥{{ bonds[current].bond_money || 0 }}</text
          >
        </view>
      </view>

      <!-- 保证金列表 -->
      <view class="bond-list mt-10">
        <view
          class="item p-20 bcl-white box box-between"
          :class="{ active: index == current }"
          v-for="(item, index) in bonds"
          :key="index"
          @tap="changeIndex(index)"
        >
          <view class="name">{{ item.bond_name }}</view>
          <view class="money">{{ item.bond_money }}元</view>
        </view>
      </view>

      <!-- 支付方式 -->
      <view class="pay-type mt-30 text-center">
        <view class="wechat-pay-box p-20 text-center active">
          <view class="icon inline-block">
            <text class="icon icon-wallet-pay fz-36 cl-warning"></text>
          </view>

          <view class="mt-10">余额支付</view>
        </view>
        <view class="text-center mt-15">支付方式</view>
      </view>
    </view>

    <!-- 支付底部栏 -->
    <view
      class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
      @tap="passwordDialogShow = true"
      >确认</view
    >

    <!-- 密码输入模态框 -->
    <uni-dialog v-model="passwordDialogShow" :showBtn="false">
      <view class="text-center pl-20 pr-20 pb-20" slot="content">
        <view class="mb-20 bold fz-15">请输入支付密码</view>
        <view class="uni-input bcl-white">
          <input
            type="password"
            focus
            @submit="onPasswordDone"
            v-model="password"
          />
        </view>
        <button class="uni-button uni-button-main mt-20" @tap="onPasswordDone">
          完成
        </button>
      </view>
    </uni-dialog>

    <!-- 支付成功模态框 -->
    <uni-dialog v-model="isPaySuccess" :showBtn="false">
      <view class="text-center pl-20 pr-20 pb-20" slot="content">
        <view class="fz-15 bold">
          <text class="icon icon-success cl-main fz-30"></text>
          <text>缴纳成功!</text>
        </view>

        <navigator open-type="navigateBack">
          <button class="uni-button uni-button-main mt-20">
            返回
          </button>
        </navigator>
      </view>
    </uni-dialog>
  </view>
</template>

<script>
import { listBond, payBond } from "@/apis/pay";
import uniDialog from "@/components/dialog";

export default {
  data() {
    return {
      bonds: [],
      password: "",
      passwordDialogShow: false,
      isPaySuccess: false,
      current: 0,
    };
  },

  onLoad(options) {
    this.balance = options.balance;
    this.listBond();
  },

  methods: {
    /**
     * 保证金列表
     */
    async listBond() {
      let { code, data } = await listBond();
      if (code == 200) this.bonds = data;
    },

    /**
     * 缴纳保证金
     */
    async payBond() {
      let params = {
        cash: this.bonds[this.current].bond_money,
        password: this.password,
      };

      let { code, data } = await payBond(params);

      if (code == 200) {
        this.passwordDialogShow = false;
        this.isPaySuccess = true;
      }
    },

    /**
     * 密码输入完毕分发
     */
    onPasswordDone() {
      if (!this.password) return this.$toast("密码不能为空~");
      this.payBond();
    },

    changeIndex(index) {
      this.current = index;
    },
  },

  components: {
    uniDialog,
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-bottom: 140upx;

  .wechat-pay-box {
    width: 240upx;
    margin: 0 auto 20upx;
    border: 2upx solid $color-basic;

    &.active {
      background: $color-border-deep;
    }
  }

  .bond-list {
    .item {
      &.active {
        background-color: $color-main !important;
        color: #fff;
      }
    }
  }
}
</style>
